<template>
  <div>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item href="/events/list">报警列表</Breadcrumb-item>
      <Breadcrumb-item>报警详情</Breadcrumb-item>
    </Breadcrumb>
    <div>
      <Form ref="formEvent" :model="formEvent" :rules="ruleValidate" :label-width="100">

        <Row :gutter="32">
          <Col span="10">

            <Form-item label="标识" prop="id">
                <Input v-model="formEvent.id"/>
            </Form-item>

            <Form-item label="类型" prop="type">
                  <Input :value="getTypeText(formEvent.type)" :readonly="!!id"/>
            </Form-item>

            <Form-item label="状态" prop="status">
                  <Input :value="getStatusText(formEvent.status)" :readonly="!!id"/>
            </Form-item>

            <Form-item label="记录时间" prop="created">
                  <Input :value="getTimeText(formEvent.created)" :readonly="!!id"/>
            </Form-item>

            <Form-item label="图片路径" prop="filepath">
                  <Input v-model="formEvent.filepath" :readonly="!!id"/>
            </Form-item>

          </Col>

          <Col span="12">

          <Form-item label="企业" prop="company">
                <Input v-model="formEvent.company" :readonly="!!id"/>
          </Form-item>

          <Form-item label="工位名称" prop="station">
                <Input v-model="formEvent.station" :readonly="!!id"/>
          </Form-item>

          <Form-item label="工位号" prop="num">
                <Input v-model="formEvent.num" :readonly="!!id"/>
          </Form-item>

          <Form-item label="允许人数" prop="capacity">
                <Input v-model="formEvent.capacity" :readonly="!!id"/>
          </Form-item>

          <Form-item label="报警人数" prop="peoples">
                <Input v-model="formEvent.peoples" :readonly="!!id"/>
          </Form-item>

          </Col>
        </Row>



        <Form-item label="备注" prop="memo">
          <Row>
            <Col span="22">
              <Input v-model="formEvent.memo" type="textarea" :rows=3 placeholder="请输入备注" :readonly="!!id"/>
            </Col>
          </Row>
        </Form-item>

        <Form-item label="图片" prop="url">
          <Row>
            <Col span="12">
              <img class="record-img" :src="getFullUrl(formEvent.url)" />
            </Col>
          </Row>
        </Form-item>

        <Form-item>
          <Button type="ghost" @click="$router.back()">返回</Button>
        </Form-item>
      </Form>
    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Config from '@/config'
  // import Account from '@/service/account'
  // import AccountPerm from '@/service/accountPerm'
  // import Rest from '@/service/rest'
  import Util from '@/service/util'
  import Event from '@/service/app/event'

  export default {
    name: 'EventForm',
    components: {
    },
    data () {
      return {
        id: '',
        formEvent: {
          id: '',
          name: '',
          url: '',
          altUrl: '',
          outPath: '',
          httpPrefix: '',
          memo: ''
        },
        ruleValidate: {
          name: [
            {
              required: true,
              message: '名称不能为空'
            },
            {
              max: 100,
              message: '名称不能多于 100 个字'
            }
          ],
          url: [
            {
              required: true,
              message: 'URL不能为空'
            }
          ],
          httpPrefix: [
            {
              required: true,
              message: '该输出路径的HTTP URL不能为空'
            }
          ]
        }
      }
    },
    computed: {
      ...mapState(['events'])
    },
    watch: {
      'events.event': {
        handler (newVal) {
          this.$set(this, 'formEvent', newVal)
        }
      }
    },
    created () {
      this.id = this.$route.params.id
      this.id && this.get(this.id)
    },
    methods: {
      get (id) {
        this.$store.dispatch('getEvent', {id}).then((data) => {
        })
      },
      handleSave () {
        this.$refs.formEvent.validate((valid) => {
          if (valid) {
            const action = this.id ? 'putEvent' : 'postEvent'

            this.$store.dispatch(action, this.formEvent).then(() => {
              this.$Message.success((this.id ? '编辑' : '新增') + '成功！')
              !this.id && this.resetFields()

              if (!this.id) {
                this.$router.back()
              }
            })
          }
        })
      },
      getFullUrl (url) {
        return Config.BASE_URL + url
      },
      getTypeText (type) {
        return Event.getTypeText(type)
      },
      getStatusText (status) {
        return status > 0 ? '成功' : '失败'
      },
      getTimeText (seconds) {
        return Util.getTimeText(seconds)
      },
      resetFields () {
        let type = this.formEvent.type
        let parent = this.formEvent.parent

        this.$refs.formEvent.resetFields()

        this.formEvent.type = type
        this.formEvent.parent = parent
      }
    }
  }
</script>

<style scoped>

.upload-img {
  width: 80px;
  height: 60px;
  margin-top: 8px;
}

.bm-view {
  width: 100%;
  height: 400px;
}

.record-img {
  max-width: 960px;
}

</style>

